<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,inital-scale=1.0">
  <title>尚优选pc端项目</title>
  <link rel="stylesheet" href="css/index1.css">
  <link rel="stylesheet" href="css/reset.css">
</head>
<body>
<div id="wrapper">
  <!--最外层包裹元素-->
  <!--头部-->
  <header id="header">
    <!--头部上班部分-->
    <div class="headTop">
      <!--版心元素-->
      <div class="headTopMain">
        <!--版心左侧-->
        <div class="left">
          <h5>欢迎来到尚优选！请</h5>
          <p><a href="javascript:;">注册</a>
            <a href="javascript:;">登录</a>
          </p>
        </div>
        <!--版心右侧-->
        <div class="right">
          <nav>
            <a href="javascript:;">我的订单</a>
            <a href="javascript:;">我的购物车</a>
            <a href="javascript:;">我的会员</a>
            <a href="javascript:;">企业采购</a>
            <a href="javascript:;">关注尚有选</a>
            <a href="javascript:;">商家后台</a>
          </nav>
        </div>
      </div>
    </div>
    <!--头部下半部分-->
    <div class="headBottom">
      <!--版心元素-->
      <div class="headBottomMain">
        <!--logo-->
        <div class="logo">
          <a href="javascript:;">
            <img src="images/logo.png" alt="">
          </a>
        </div>
        <!--搜索框-->
        <div class="search">
          <input type="text" placeholder="请输入搜索内容">
          <input type="submit" value="搜索">
        </div>

      </div>
    </div>
  </header>
  <!--头部结束，分类导航开始-->
  <div id="navWrap">
    <!--版新元素-->
    <div class="navWrapMain">
      <a href="javascript:;">全部商品分类</a>
      <a href="javascript:;">服装城</a>
      <a href="javascript:;">美妆管</a>
      <a href="javascript:;">尚有选超市</a>
      <a href="javascript:;">全球购</a>
      <a href="javascript:;">闪购</a>
      <a href="javascript:;">团购</a>
      <a href="javascript:;">有趣</a>
      <a href="javascript:;">秒杀</a>
    </div>
  </div>
  <!--分类导航结束-->

  <!--内容区域开始-->
  <div id="content">
    <!--版心元素-->
    <div class="contentMain">
      <!--路径导航-->
      <div id="navPath"></div>
      <!--路径导航结束，-->
      <!--中间区域-->
      <div id="center">
        <!--左侧放大镜-->
        <div id="left">
          <!--放大镜上边-->
          <div id="leftTop">
            <!--小图-->
            <div id="smallPic">
              <!--小图片-->
              <img src="images/111.avif" alt="">
              <!--蒙版元素-->
            </div>
            <!--大图-->
            <!-- <div id="bigPic">
               &lt;!&ndash;大图片&ndash;&gt;
               <img src="images/1a18abe36a5d8ce9.jpg" alt="">
             </div>-->
          </div>
          <!--下边-->
          <div id="leftBottom">
            <a href="javascript:;" class="prev">< </a>
            <div id="piclist">
              <ul></ul>
            </div>
            <a href="javascript:;" class="next"> ></a>
          </div>
        </div>
        <!--右侧商品详情区域-->
        <div class="right">
          <!--商品详情数据开始-->
          <div class="rightTop">
          </div>
          <!--商品详情数据结束-->
          <!--商品参数数据结构开始-->
          <div class="rightBottom">
            <!--选择后结果区域-->
            <div class="choose">
            </div>
            <!--商品参数选择区域-->
            <div class="chooseWrap">
            </div>
            <!--加入购物车以及数量区域-->
            <div class="addCart">
              <div class="count">
                <input type="text">
                <a href="javascript:;">+</a>
                <a href="javascript:;">-</a>
              </div>
              <button>加入购物车</button>

            </div>
          </div>
        </div>
        <!--商品参数数据结构结束-->
      </div>
      <!--右侧商品区域结束-->
      <!--商品详情中间区域开始-->
      <div class="goodsDetailWrap">
        <!--左边的侧边栏-->
        <aside class="leftAside">
          <!--上边-->
          <div class="asideTop">
            <h4 class="active">相关分类</h4>
            <h4>推荐品牌</h4>
          </div>
          <!--下边-->
          <div class="asideContent">
            <div class="active">
              <ul class="goodsList1">
                <li>手机</li>
                <li>手机壳</li>
                <li>内存卡</li>
                <li>iphone配件</li>
                <li>贴膜</li>
                <li>手机耳机</li>
                <li>移动电源</li>
                <li>平板电脑</li>
              </ul>
              <ul class="goodsList2">
                <li><img src="images/s1.jpg" alt="">
                  <span>Apple 苹果6S</span>
                  <p>$6899</p>
                  <div class="button"><a href="javascript:;">加入购物车</a></div>
                </li>
                <li><img src="images/s1.jpg" alt="">
                  <span>Apple 苹果6S</span>
                  <p>$6899</p>
                  <div class="button"><a href="javascript:;">加入购物车</a></div>
                </li>
                <li><img src="images/s1.jpg" alt="">
                  <span>Apple 苹果6S</span>
                  <p>$6899</p>
                  <div class="button"><a href="javascript:;">加入购物车</a></div>
                </li>
                <li><img src="images/s1.jpg" alt="">
                  <span>Apple 苹果6S</span>
                  <p>$6899</p>
                  <div class="button"><a href="javascript:;">加入购物车</a></div>
                </li>
              </ul>
            </div>
            <div class="active">推荐品牌内容</div>
          </div>

        </aside>
        <!--左边的侧边栏结束-->
        <!--右边的结构-->
        <div class="rightDetail">
          <!--选择搭配开始-->
          <div class="chooseBox">
            <!--标题-->
            <h4>选择搭配</h4>
            <!--内容-->
            <div class="listWrap">
              <!--左边-->
              <div class="left">
                <img src="images/s1.jpg" alt="">
                <p>$5299</p>
                <i>+</i>
              </div>
              <!--中间-->
              <ul class="middle">
                <li>
                  <img src="images/s1.jpg" alt="">
                  <span>尤尔达大大</span>
                  <div>
                    <input type="checkbox" value="50">
                    <span>50</span>
                  </div>
                </li>
                <li>
                  <img src="images/s1.jpg" alt="">
                  <span>尤尔达大大</span>
                  <div>
                    <input type="checkbox" value="50">
                    <span>50</span>
                  </div>
                </li>
                <li>
                  <img src="images/s1.jpg" alt="">
                  <span>尤尔达大大</span>
                  <div>
                    <input type="checkbox" value="50">
                    <span>50</span>
                  </div>
                </li>
                <li>
                  <img src="images/s1.jpg" alt="">
                  <span>尤尔达大大</span>
                  <div>
                    <input type="checkbox" value="50">
                    <span>50</span>
                  </div>
                </li>
              </ul>
              <!--右边-->
              <div class="right">
                <div>已购0件</div>
                <p>套餐件</p>
                <i>$5299</i>
                <div>
                  <button>加入购物车</button>
                </div>
              </div>
            </div>
          </div>
          <!--选择搭配结束-->
          <!--选项卡开始-->
          <div class="BottomDetail">
            <!--菜单-->
            <ul class="tabBtns">
              <li class="active"><a href="javascript:;">商品介绍</a></li>
              <li><a href="javascript:;">规格包装</a></li>
              <li><a href="javascript:;">售后与保障</a></li>
              <li><a href="javascript:;">商品评价</a></li>
              <li><a href="javascript:;">手机社区</a></li>
            </ul>
            <!--内容-->
            <div class="tabContents">
              <div class="active">
                <ul>
                  <li>分辨率</li>
                  <li>后置摄像头</li>
                  <li>前置摄像头</li>
                  <li>荷属</li>
                  <li>品牌</li>
                </ul>
                <img src="images/111.avif" alt="">
              </div>
              <div> 包装</div>
              <div></div>
              <div></div>
              <div></div>
            </div>
          </div>
          <!--选项卡结束-->

        </div>
        <!--右边的结构结束-->

      </div>
      <!--商品详情中间区域结束-->
    </div>
  </div>
  <!--内容区域结束-->
  <!--右侧侧边栏开始-->
  <div class="rightAside asideClose">
       <!--按钮区域-->
    <div class="btns btnsClose"></div>
    <!--侧边栏内容-->
    <div class="content"></div>
    <!--侧边导航-->
    <ul class="navList">
      <li>
        <!--小图标-->
        <p></p>
        <i>尚选会员</i>
      </li>
      <li>
        <!--小图标-->
        <p></p>
        <i>尚选会员</i>
      </li>
      <li>
        <!--小图标-->
        <p></p>
        <i>尚选会员</i>
      </li>
      <li>
        <!--小图标-->
        <p></p>
        <i>尚选会员</i>
      </li>
      <li>
        <!--小图标-->
        <p></p>
        <i>尚选会员</i>
      </li>
      <li>
        <!--小图标-->
        <p></p>
        <i>尚选会员</i>
      </li>
    </ul>

  </div>
  <!--右侧侧边栏结束-->
</div>
<script src="js/data.js"></script>
<script src="js/index.js"></script>
</body>
</html>
